<template>
  <div class="home">
    <div class="logo">
      <img src="~@/assets/logo-1.png" alt="logo" height="126">
    </div>
    <div class="content">
      <a-row>
        <a-col :span="8">
          <a-card hoverable @click="onHandle" class="card">
            <img src="~@/assets/home/t-3.png" alt="logo" style="margin-top: 10px;">
            <div style="color: #fff; font-size: 18px;margin-top: 10px;">
              生产现场检测
            </div>
          </a-card>
          <br />
          <a-card hoverable @click="onHandle" class="card">
            <img src="~@/assets/home/t-6.png" alt="logo" style="margin-top: 10px;">
            <div style="color: #fff; font-size: 18px;margin-top: 10px;">
              系统控制
            </div>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card hoverable @click="onHandle" class="card">
            <img src="~@/assets/home/t-4.png" alt="logo" style="margin-top: 40px;">
            <div style="color: #fff; font-size: 18px;margin-top: 10px;">
              数据分析
            </div>
          </a-card>
          <a-row>
            <a-col :span="12">
              <a-card hoverable style="height: 100px;" @click="onHandle" class="card">
                <img src="~@/assets/home/t-7.png" alt="logo">
                <div style="color: #fff; font-size: 18px;">
                  数据中心
                </div>
              </a-card>
            </a-col>
            <a-col :span="12">
              <a-card style="height: 100px;" hoverable @click="onHandle" class="card">
                <img src="~@/assets/home/t-8.png" alt="logo" >
                <div style="color: #fff; font-size: 18px;">
                  API平台
                </div>
              </a-card>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="8">
          <a-card hoverable @click="onHandle" class="card">
            <img src="~@/assets/home/t-5.png" alt="logo" style="margin-top: 10px;">
            <div style="color: #fff; font-size: 18px;margin-top: 10px;">
              决策支持
            </div>
          </a-card>
          <br />
          <a-card hoverable @click="onHandle" class="card">
            <img src="~@/assets/home/t-9.png" alt="logo" style="margin-top: 10px;">
            <div style="color: #fff; font-size: 18px;margin-top: 10px;">
              任务调度
            </div>
          </a-card>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="10">
          <a-card hoverable @click="onHandle" class="card">
            <img src="~@/assets/home/t-10.png" alt="logo" style="margin-top: 10px;">
            <div style="color: #fff; font-size: 18px;margin-top: 10px;">
              集成驾驶舱
            </div>
          </a-card>
        </a-col>
        <a-col :span="4">
          <a-card hoverable @click="onHandle" class="card">
            <img src="~@/assets/home/t-11.png" alt="logo" style="margin-top: 10px;">
            <div style="color: #fff; font-size: 18px;margin-top: 10px;">
              文档中心
            </div>
          </a-card>
        </a-col>
        <a-col :span="10">
          <a-card hoverable @click="onHandle" class="card">
            <img src="~@/assets/home/t-12.png" alt="logo" style="margin-top: 10px;">
            <div style="color: #fff; font-size: 18px;margin-top: 10px;">
              算法库
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    components: {

    },
    data() {
      return {
      }
    },
    methods: {
      onHandle() {
        this.$router.push({ path: "/dashboard/analysis" }).catch(() => {
          // console.log('登录跳转首页出错,这个错误从哪里来的')
        })
      }
    }
  }
</script>

<style scoped>
  .home {
    width: 1920px;
    height: 1080px;
    margin: 0 auto;
    padding: 0;
    background: #f0f2f5 url(~@/assets/bg.jpg) no-repeat 50%;
    text-align: center;
  }

  .home>.logo {
    width: 100%;
    margin: 0 auto;
    padding-top: 135px;
  }

  .home>.content {
    width: 100%;
    height: 510px;
    margin-top: 38px;
    padding: 10px 295px;
    border: 0px;
  }
  .ant-card-body{
    padding:12px;
  }
  .card {
    backdrop-filter: blur(8px);
    background-color: rgba(255, 255, 255, .2);
    border: 0px;
    border-radius: 6px;
    margin: 10px;
  }
</style>